<!--
* @description 交易所物品列表
* @fileName exchangeList.vue
* @author huangyu
* @date 2023/02/09 08:36:38
!-->
<template>
    <div>
        <el-form :inline="true">
            <el-form-item>
                <el-input v-model="name" placeholder="请输入物品名称"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-select v-model="sex" style="width:80px">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="男" value="1"></el-option>
                    <el-option label="女" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="品质">
                <el-select v-model="pinzhi" style="width:80px">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="普通" value="普通"></el-option>
                    <el-option label="散仙" value="散仙"></el-option>
                    <el-option label="真仙" value="真仙"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="物品等级">
                <el-input v-model="levelMin" placeholder="最小" style="width:60px"></el-input>
                <el-input v-model="levelMax" placeholder="最大" style="width:60px"></el-input>
            </el-form-item>
            <el-form-item label="价格排序">
                <el-select v-model="sort" style="width:100px">
                    <el-option label="升序" :value="1"></el-option>
                    <el-option label="降序" :value="-1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="价格类型">
                <el-select v-model="priceType" style="width:100px">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="金币" value="1"></el-option>
                    <el-option label="炼器符" value="2"></el-option>
                    <!-- <el-option label="RMB" value="3"></el-option> -->
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getData">查询</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="list" highlight-current-row border max-height="650px">
            <el-table-column type="index" width="50" label="序号"></el-table-column>
            <el-table-column label="物品图标" width="80">
                <template slot-scope="scope">
                    <div style="height:36px;position: relative;cursor:pointer;" @click="clickGoodsDetail(scope.row.goodsId)">
                        <img :src="`https://7765-web-cloud0713-6g519i65f479e638-1301064135.tcb.qcloud.la/GamePublic/${scope.row.icon}`" alt="">
                        <div class="zx-icon-bg"></div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="物品名称" prop="goodsName" width="200" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="物品等级" prop="level" width="100">
                <template slot-scope="scope">
                    {{scope.row.level}}
                </template>
            </el-table-column>
            <el-table-column label="物品类型" width="100">
                <template slot-scope="scope">
                    {{scope.row.typeStr}}
                </template>
            </el-table-column>
            <el-table-column label="品质" prop="pinzhi" width="100">
                <template slot-scope="scope">
                    {{scope.row.pinzhi}}
                </template>
            </el-table-column>
            <el-table-column label="所属门派" prop="classStr" width="100"></el-table-column>
            <el-table-column label="强化等级" prop="strong" width="100"></el-table-column>
            <el-table-column label="售卖单价" prop="money" width="110">
                <template slot-scope="scope">
                    <strong class="color_danger">{{scope.row.money}}</strong>
                    {{scope.row.priceType=='1'?'金币':scope.row.priceType=='2'?'炼器符':scope.row.priceType=='3'?'RMB':''}}
                </template>
            </el-table-column>
            <el-table-column label="数量" prop="number" width="100"></el-table-column>
            <el-table-column label="寄售人" prop="gameName" width="150" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <div class="color_blue">{{scope.row.gameName}}</div>
                </template>
            </el-table-column>
            <el-table-column label="QQ" prop="qq" width="150">
                <template slot-scope="scope">
                    <div v-if="token">
                        <div v-if="scope.row.isSecrecy">保密</div>
                        <div v-else>{{scope.row.qq}}</div>
                    </div>
                    <div v-else>登录后查看</div>
                </template>
            </el-table-column>
            <el-table-column label="物品图片" prop="goodsImage" width="100">
                <template slot-scope="scope">
                    <el-tooltip placement="left" effect="light">
                        <div slot="content">
                            <el-image :src="scope.row.goodsImage" style="max-width:600px;"></el-image>
                        </div>
                        <i class="el-icon-picture-outline color_blue" style="font-size:16px;" v-if="scope.row.goodsImage"></i>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column label="备注" prop="remake" :show-overflow-tooltip="true"></el-table-column>
            <!-- <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                    <el-button type="primary" v-if="token!=scope.row.token" size="mini" @click="onOrder(scope.row)" plain>下单</el-button>
                </template>
            </el-table-column> -->
        </el-table>

        <pagination
        :total="total"
        :current-page="pageindex"
        :display="pagesize"
        @pagechange="pagechange"
        ></pagination>

        <!-- 下单 -->
        <el-dialog title="确认下单" :visible.sync="dialogOrder" width="450px" v-dialogDrag>
            <el-form label-width="100px">
                <el-form-item label="物品名称：">{{row.goodsName}}</el-form-item>
                <el-form-item label="售卖单价：">
                    <strong class="color_danger">{{row.money}}</strong>
                    {{row.priceType=='1'?'金币':row.priceType=='2'?'炼器符':row.priceType=='3'?'RMB':''}}    
                </el-form-item>
                <el-form-item label="下单数量：">
                    <el-input v-model="orderForm.oNumber" placeholder="请输入数量"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-button type="primary" @click="submitOrder">确认下单</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog title="请先登录" :visible.sync="dialogLogin" width="450px" v-dialogDrag>
            <vLogin @onLogin="onLogin"></vLogin>
        </el-dialog>

        <el-dialog title="物品详情" width="350px" :visible.sync="dialogGoodDetail" v-dialogDrag>
            <vGoodsDetail :id="goodsId"></vGoodsDetail>
        </el-dialog>
    </div>
</template>

<script>
import vLogin from '@/page/game/zhuxian/login.vue'
import { get } from '@/common/app.js'
import pagination from "@/components/common/pagination.vue";
import vGoodsDetail from "../goods/goodsDetail.vue"
export default {
    components: { pagination,vLogin,vGoodsDetail },
    props:{
        // 左侧类别id数据
        categoryModel: {},
    },
    data() {
        return {
            list: [],
            token: this.$store.state.token,
            goodsId: "",

            name: "",
            sex: "",
            levelMin: "",
            levelMax: "",
            pinzhi: "",
            className: "",
            type: "",
            sort: 1,
            priceType: "",


            pageindex: 1,
            pagesize: 20,
            total: 0,

            row: {},
            dialogOrder: false,
            orderForm: {
                oNumber: "",
            },

            dialogLogin: false,
            dialogGoodDetail: false,
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        // 物品详情
        clickGoodsDetail(goodsId){
            this.goodsId = goodsId
            this.dialogGoodDetail = true
        },
        onLogin(){
            this.dialogLogin = false
            this.$router.go(0)
        },
        submitOrder(){
            this.orderForm.oNumber = Number(this.orderForm.oNumber)
            let oNumber = Number(this.orderForm.oNumber)
            let boothNumber = Number(this.row.number)
            if(!oNumber){
                this.$message.error("请输入下单数量")
                return
            }
            // 下单数不能大于售卖数
            if(oNumber<=boothNumber){
                // console.log(this.orderForm)
                let params = {
                    type: 'getOrder',
                    api: 'api-order-add',
                    data: {
                        data: this.orderForm,
                    },
                }
                get('game', params).then(res => {
                    if (res) {
                        if(res.requestId){
                            this.$message.success("下单成功！")
                            this.getData()
                            this.dialogOrder = false
                        }
                    }
                })

            }else{
                this.$message.error("下单数不能大于售卖数！")
                return
            }
        },
        onOrder(row){
            if(!this.token){
                this.dialogLogin = true
                return
            }
            this.row = row
            this.orderForm.boothId = row._id
            this.orderForm.goodsId = row.goodsId
            this.orderForm.sellId = row._id
            this.orderForm.buyId = this.token
            this.orderForm.code = row.code
            this.dialogOrder = true
        },
        getData(){
            let params = {
                type: 'getBooth',
                api: 'api-booth-list-all',
                data: {
                    name: this.name,
                    sex: this.sex,
                    levelMin: this.levelMin,
                    levelMax: this.levelMax,
                    pinzhi: this.pinzhi,
                    sort: this.sort,
                    priceType: this.priceType,
                    class: this.categoryModel.parentId?this.categoryModel.parentId:"",
                    goodsType: this.categoryModel.id,
                    pageIndex: this.pageindex,
                    pageSize: this.pagesize,
                },
            }
            // console.log(params)
            get('game', params).then(res => {
                if (res) {
                    console.log(res)
                    this.list = res.list
                    this.total = res.total
                }
            })
        },
        pagechange: function(currentPage) {
            this.pageindex = currentPage;
            this.getData();
        },
    },
}
</script>

<style scoped>

</style>